<template>
  <!-- 员工账单管理 -->
  <div class="Employee">
    <div class="header">
      <!-- 日期时间选择器 -->
      <el-date-picker
      v-model="accountTime"
      type="daterange"
      align="right"
      unlink-panels
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions">
    </el-date-picker>
      <!-- 交易类型类型下拉框 -->
      <el-select v-model="accountStatus" clearable placeholder="请选择交易状态">
        <el-option label="正常" value="正常"></el-option>
        <el-option label="未审核" value="未审核"></el-option>
      </el-select>
      <!-- 状态下拉框 -->
      <el-select v-model="accountType" clearable placeholder="请选择交易类型">
        <el-option label="提现" value="提现"></el-option>
        <el-option label="收益" value="收益"></el-option>
      </el-select>
      <!-- 员工编号输入框 -->
      <el-input style="width: 200px" placeholder="请输入用户编号" v-model="accountUserId" clearable></el-input>
      <!-- 查询按钮 -->
      <el-button type="primary" @click="queryAccount">查询</el-button>
    </div>

    <!-- 内容显示区域 -->
    <div class="table_content">
      <el-table :data="accountData" border stripe style="width: 100%">
        <!-- 编号 -->
        <el-table-column prop="id" label="编号" align="center" width="100"></el-table-column>
        <!-- 交易金额 -->
        <el-table-column prop="transferMoney" label="交易金额" align="center"></el-table-column>
        <!-- 交易时间  -->
        <el-table-column prop="transferTime" label="交易时间" :formatter="formatDate" align="center">
        </el-table-column>
        <!-- 交易类型 -->
        <el-table-column prop="type" label="交易类型" align="center"></el-table-column>
        <!-- 状态 -->
        <el-table-column prop="status" label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag
              size="mini"
              :type="scope.row.status=='正常'?'success':'danger'"
            >{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <!-- 描述 -->
        <el-table-column prop="description" label="描述" align="center"></el-table-column>
      </el-table>
    </div>
    <!-- 底部分页按钮 -->
    <div class="paginetion">
      <!-- 分页组件 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
// 引入axios
import { get, post } from "@/utils/request";
import moment from "moment";
export default {
  data() {
    return {
      // 时间选择器数据
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 交易时间
      accountTime: [],
      // 员工账单数组 - 表格的数据源的数据
      accountData: [],
      // 交易类型-下拉选择
      accountType: "",
      // 交易状态-下拉选择
      accountStatus: "",
      // 员工编号-下拉选择
      accountUserId: "",
      // 当前的页码
      currentPage: 1,
      // 每页要展示的数据条数
      pageSize: 6,
      // 页面展示数据的总条数
      total: 10,
      // 定一个查询的参数
      queryData: {},
    };
  },
  computed: {},
  methods: {
    // 查询所有员工账单信息
    async getaccountData() {
      // 获取参数
      let data = {
        page: this.currentPage,
        pageSize: this.pageSize,
      }
      // {...data, ...this.queryData}
      // 将queryData和data结合成一个对象呢？
      // 通过对应的参数发送网络请求 获取账单数组数据
      let res = await get("/account/pageQueryEmployeeAccount", {...data, ...this.queryData})
      // 将data中的账单数组进行赋值
      this.accountData = res.data.list
      // 页面总数据条数 赋值
      this.total = res.data.total
    },

    // 根据条件模糊查询员工账单
    queryAccount() {
      // 定义参数
      if(this.accountTime) {
        var data = {
        // 开始时间
        beginTime: Date.parse(this.accountTime[0]),
        // 结束时间
        endTime: Date.parse(this.accountTime[1]),
        // 交易类型
        type: this.accountType,
        // 交易状态
        status: this.accountStatus,
        // 用户编号
        userId: this.accountUserId
        }
      }else {
        var data = {
          // 交易类型
          type: this.accountType,
          // 交易状态
          status: this.accountStatus,
          // 用户编号
          userId: this.accountUserId
        }
      }
      //格式化参数 当某个属性没有值的时候 将其删除掉 以防影响网络请求的操作
      for (const key in data) {
        if(!data[key]) {
          delete data[key]
        }
      }
      // 将参数 赋值给 queryData
      this.queryData = data
      // 将页数强制回到第一页
      this.currentPage = 1
      // 重新加载账单数据
      this.getaccountData()
    },

    // 转换时间戳
    formatDate: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
      //return moment(date).format("YYYY-MM-DD");
    },


    // 控制每页数据条数
    handleSizeChange(val) {
      // 将每页要展示的数据的条数 进行一个更新
      this.pageSize = val;
      // 将当前的页数 重置到第一页
      this.currentPage = 1;
      // 重新调用获取所有账单数据的方法
      this.getaccountData();
    },
    // 控制当前显示的页数
    handleCurrentChange(val) {
      // 将当前页数 与 分页插件动态点击控制的页数相绑定
      this.currentPage = val;
      // 重新调用获取所有账单数据的方法
      this.getaccountData();
    },
  },
  created() {
    this.getaccountData();
  },
  mounted() {},
};
</script>
<style scoped>
.table_content {
  margin-top: 10px;
}
/* 分页区域的样式 */
.paginetion {
  position: fixed;
  bottom: 40px;
  right: 10px;
}
</style>